<script lang="ts">
import {
  NSpace,
  NForm,
  NFormItem,
  NSelect,
  NInput,
  NButton,
  NDatePicker,
  FormInst,
} from "naive-ui";
import { defineComponent, ref, useAttrs } from "vue";

export default defineComponent({
  name: "h-conditional-search",
  components: {
    NSpace,
    NButton,
    NFormItem,
    NForm,
    NInput,
    NSelect,
    NDatePicker,
  },
  setup() {
    const formItem = ref<any>();
    const formRef = ref<FormInst | null>(null);
    const { columns } = useAttrs() as any;

    return {
      formRef,
      columns,
      formItem,
    };
  },
  methods: {
    // 按钮点击事件
    searchclick() {
      console.log("查询");
    },
    restFrom() {
      this.formItem = {};
      console.log(this.formRef);
      console.log("重置");
    },
  },
});
</script>
<template>
  <n-space justify="space-between" style="width: 100%">
    <n-form
      ref="formRef"
      :model="formItem"
      label-placement="left"
      label-width="auto"
    >
      <n-form-item
        v-for="({title,key,category,formItemProps},index) in (columns as any)"
        :key="`key_${index}`"
        :path="key"
        :label="`${title}:`"
      >
        <n-input
          style="width: 180px; display: inline-block; margin-left: 10px"
          v-if="category === 'input'"
          v-bind="formItemProps"
        />
        <n-select
          v-if="category === 'select'"
          v-bind="formItemProps"
          filterable
        />
        <n-date-picker
          v-if="category === 'datetime'"
          v-bind="formItemProps"
          value-format="yyyy-MM-dd HH:mm:ss"
          clearable
        />
        <n-date-picker
          v-if="category === 'daterange'"
          v-bind="formItemProps"
          clearable
        />
      </n-form-item>
    </n-form>
    <div class="button">
      <n-button @click="restFrom">重置</n-button>
      <n-button @click="searchclick" type="primary">查询</n-button>
    </div>
  </n-space>
</template>
<style scoped lang="less">
.n-form {
  width: 100%;
  margin-left: 10px;
  margin-right: 24px;
  display: flex;
  height: 50px;
  line-height: 50px;
  justify-content: space-between;
  background-color: #ffffff;

  .n-form-item {
    display: inline-block;
    display: flex;
    align-items: center;
    white-space: nowrap;
    margin-left: 5px;
  }
}
</style>
